<template>
  <!-- 
    这个组件是公用的提示组件
    这种自动消失没有可以操作的提示框通常叫toast
 -->
  <div class="toast" :class="toasttype">
    <!-- 这个组件仅仅是用于提示成功 失败 警告 图标可以写死  -->
    <i class="iconfont" :class="$store.state.toastIcon"></i
    ><span>{{ $store.state.toastMsg }}</span>
  </div>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  computed: {
    toasttype() {
      let type = "success";
      switch (this.$store.state.toastIcon) {
        case "icon-toast-shibai_huaban":
          type = "danger";
          break;
        case "icon-toast-jinggao":
          type = "warning";
          break;
      }
      return type;
    },
  },
};
</script>
 
<style lang = "less" scoped>
.toast {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translate(-50%);
  background-color: #ccc;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid #ccc;
  .iconfont {
    margin-right: 20px;
  }
  &.success {
    background-color: rgb(50, 252, 90);
    color: #fff;
  }
  &.danger {
    background-color: pink;
    color: #fff;
  }
  &.warning {
    background-color: #f0ad4e;
    color: #fff;
  }
}
</style>